import { useEffect, useState } from 'react'
import './index.scss'
import axios from '../../api/index'
import { useParams } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
import { UserCircleOutline } from 'antd-mobile-icons'
import { Toast } from 'antd-mobile'

type SickCircleData = {
  title?: string
  disease?: string
  department?: string
  detail?: string
  treatmentProcess?: string
  collectionNum?: number
  commentNum?: number
}

function Byqxq() {
  const { id } = useParams()
  const [data, setData] = useState<SickCircleData>({})
  const [visile, setVisile] = useState(false)
  const navigate = useNavigate()
  
  // 病友圈详情页面
  useEffect(() => {
    axios.get('/user/sickCircle/v1/findSickCircleInfo', {
      params: {
        sickCircleId: id
      }
    }).then(res => {
      console.log(res);
      setData(res.data.result)
    })
  }, [id])
  
  return (
    <div className='byqxq'>
      <div className='xq-top'>
        <div>
          <span >
            <UserCircleOutline className='top' onClick={() => navigate('/my')} />
          </span>
        </div>
        <div className='bt'>
          <span>{data.title}</span>
        </div>
        <div className='xx'>
          <span><img src="../../../public/15.png" alt="" className='xx' onClick={() => navigate('/xx')} /></span>
        </div>
      </div>
      <div className='byq-bottom'>
        <p className='zy'>[病症]</p>
        <p className='zz'>{data.disease ? <span>{data.disease}</span> : <span>暂无</span>}</p>
        <p className='zy'>[科室]</p>
        <p className='zz'>{data.department ? <span>{data.department}</span> : <span>暂无</span>}</p>
        <p className='zy'>[病症详情]</p>
        <p className='zz'>{data.detail ? <span>{data.detail}</span> : <span>暂无</span>}</p>
        <p className='zy'>[治疗经历]</p>
        <p className='zz'>{data.treatmentProcess ? <span>{data.treatmentProcess}</span> : <span>暂无</span>}</p>
        <p className='zy'>[相关图片]</p>
        <p ><img src="../../../public/25.png" alt="" className='zltp' /></p>
        <p className='pl-sc'>
          <span><img src={visile ? "../../../public/32.png" : "../../../public/31.png"}
            alt="" className='sc' onClick={() => {
              const next = !visile
              setVisile(next)
              Toast.show(next ? '收藏成功' : '取消收藏成功')
            }
            } /> {((data.collectionNum) || 0) + (visile ? 1 : 0)}</span>
          <span><img src="../../../public/33.png" alt="" className='pl' /> {data.commentNum}</span>
        </p>
        
      </div>
    </div>
  )
}

export default Byqxq